<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">所属计划：</label>
                  <div class="layui-input-inline mr0">
                    <select
                      id="productionPlanId"
                      name="productionPlanId"
                      lay-filter="productionPlanId"
                      lay-search
                    ></select>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">所属工序：</label>
                  <div class="layui-input-inline mr0">
                    <select
                      id="processId"
                      name="processId"
                      lay-filter="processId"
                      lay-search
                    ></select>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">工序设备：</label>
                  <div class="layui-input-inline mr0">
                    <select
                      id="deviceCode"
                      name="deviceCode"
                      lay-filter="deviceCode"
                      lay-search
                    ></select>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">物料编码：</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="skuCode"
                      class="layui-input"
                      type="text"
                      placeholder="请输入物料编码"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">物料名称：</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="skuName"
                      class="layui-input"
                      type="text"
                      placeholder="请输入物料名称"
                    />
                  </div>
                </div>
              </div>
              <div class="query-rt">
                <div class="layui-inline">
                  <button
                    class="layui-btn icon-btn color-green"
                    lay-filter="formSubSearchLog"
                    lay-submit
                  >
                    查询
                  </button>
                  <button
                    class="layui-btn icon-btn color-white"
                    lay-filter="resets"
                    lay-submit
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table
        class="layui-table"
        id="makeOrderTable"
        lay-filter="makeOrderTable"
      ></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="makeOrderTableBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"
    >详情</a
  >
  {{# if(d.productionQuantity !== d.outputQuantity){ }}
  <a class="layui-btn layui-btn-xs" lay-event="addProductionWorkOrder"
    >添加开工单</a
  >
  {{# } }}
</script>

<!-- 添加开工单弹窗 -->
<script type="text/html" id="productionWorkOrderForm">
  <form lay-filter="productionWorkOrderForm" class="layui-form model-form">
    <input name="id" type="hidden" />
    <input name="productionProcessId" type="hidden" />
    <input name="processId" type="hidden" />
    <input name="productionPlanId" type="hidden" />
    <input name="workOrderQuality" type="hidden" />
    <input name="deviceCode" type="hidden" />
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">生产任务：</label>
        <div class="layui-input-block">
          <input name="planCode" type="text" class="layui-input" readonly />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">排产编号：</label>
        <div class="layui-input-block">
          <input
            name="productionPlanRecordCode"
            type="text"
            class="layui-input"
            readonly
          />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">工站：</label>
        <div class="layui-input-block">
          <input name="deviceName" type="text" class="layui-input" readonly />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">产品料号：</label>
        <div class="layui-input-block">
          <input name="skuCode" type="text" class="layui-input" readonly />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">产品规格：</label>
        <div class="layui-input-block">
          <input name="skuSpec" type="text" class="layui-input" readonly />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">制造令编码：</label>
        <div class="layui-input-block">
          <input
            name="productionPlanRecordCode"
            type="text"
            class="layui-input"
            readonly
          />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">所属工序：</label>
        <div class="layui-input-block">
          <input name="processName" type="text" class="layui-input" readonly />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">计划排产数：</label>
        <div class="layui-input-block">
          <input
            name="productionQuantity"
            type="text"
            class="layui-input"
            readonly
          />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">已认领数：</label>
        <div class="layui-input-block">
          <input
            name="outputQuantity"
            type="text"
            class="layui-input"
            readonly
          />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">待认领数：</label>
        <div class="layui-input-block">
          <input
            id="waitProductionQuantity"
            name="waitProductionQuantity"
            type="text"
            class="layui-input"
            readonly
          />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">计划产出时间：</label>
        <div class="layui-input-block">
          <input name="createTime" type="text" class="layui-input" readonly />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">本次认领数:</label>
        <div class="layui-input-block">
          <input
            name="claimQuantity"
            placeholder="请输入认领数量"
            type="text"
            class="layui-input"
          />
        </div>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button
        class="layui-btn layui-btn-primary"
        type="button"
        ew-event="closeDialog"
      >
        取消
      </button>
      <button
        class="layui-btn"
        lay-filter="productionWorkOrderFormSubmit"
        lay-submit
      >
        保存
      </button>
    </div>
  </form>
</script>

<!-- js部分 -->
<script>
  layui.use(["layer", "form", "table", "admin"], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;

    //所属计划
    admin.initDataSelect(
      "production/productionPlan/admin/productionPlan/list",
      { limit: 99999 },
      "productionPlanId",
      null,
      "所属计划",
      "code",
      null
    );

    //所属工序
    form.on("select(productionPlanId)", function (selectData) {
      $("#processId").empty();
      admin.initDataSelect(
        "production/productionPlan/admin/productionProcess/list",
        {
          productionPlanId: selectData.value,
          limit: 99999,
        },
        "processId",
        null,
        "所属工序",
        "processName",
        "processId"
      );
    });

    //工序设备
    form.on("select(processId)", function (selectData) {
      $("#deviceCode").empty();
      admin.initDataSelect(
        "production/productionPlan/admin/productionProcessDevice/list",
        {
          processId: selectData.value,
          limit: 99999,
        },
        "deviceCode",
        null,
        "工序设备",
        "deviceCode",
        "deviceCode"
      );
    });

    // 渲染表格
    var insTb = table.render({
      elem: "#makeOrderTable",
      url: config.base + "production/makeOrder/admin/makeOrder/list",
      page: true,
      cellMinWidth: 100,
      cols: [
        [
          { type: "numbers", title: "序号" },
          { field: "code", align: "center", title: "工站任务编号" },
          {
            field: "productionPlanRecordCode",
            align: "center",
            title: "制造令编号",
            width: 160,
          },
          { field: "planCode", align: "center", title: "计划编号", width: 140 },
          { field: "skuCode", align: "center", title: "产品料号", width: 140 },
          { field: "processName", align: "center", title: "排产工序" },
          { field: "deviceName", align: "center", title: "工站", width: 140 },
          {
            field: "planProductionQuantity",
            align: "center",
            title: "计划数量",
          },
          // , {field: 'outputQuantity', align: 'center', title: '排产数量'}
          { field: "planTypeName", align: "center", title: "计划类型" },
          { field: "creatorName", align: "center", title: "编制人" },
          {
            field: "createTime",
            align: "center",
            title: "排产日期",
            width: 160,
          },
          {
            align: "center",
            toolbar: "#makeOrderTableBar",
            title: "操作",
            width: 180,
          },
        ],
      ],
      done: function (res, curr, count) {},
    });

    // 工具条点击事件
    table.on("tool(makeOrderTable)", function (obj) {
      var data = obj.data;
      if (obj.event === "detail") {
        //详情
        showDetailModel(data);
      } else if (obj.event === "addProductionWorkOrder") {
        //添加开工单
        addProductionWorkOrderModel(data);
      }
    });

    //监听排序
    table.on("sort(makeOrderTable)", function (obj) {
      table.reload("makeOrderTable", {
        initSort: obj,
        where: {
          sort: obj.field,
          order: obj.type,
        },
      });
    });

    // 搜索
    form.on("submit(formSubSearchLog)", function (data) {
      insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
    });

    // 重置搜索
    form.on("submit(resets)", function (data) {
      insTb.reload(
        { where: admin.resetSearch(data.field), page: { curr: 1 } },
        "data"
      );
    });

    // 显示详情弹窗
    function showDetailModel(data) {
      admin.putTempData("makeOrderDetail", data ? data : null);
      admin.formOpen({
        area: ["80%", "85%"],
        title: "制造令详情",
        style: "font-size: 20px;",
        path: "components/productionPlan/makeOrder_detail.html",
      });
    }

    // 添加开工单弹窗
    function addProductionWorkOrderModel(data) {
      admin.open({
        type: 1,
        area: "50%",
        title: "添加开工单",
        content: $("#productionWorkOrderForm").html(),
        success: function () {
          data.waitProductionQuantity =
            data.planProductionQuantity - data.outputQuantity;
          data.productionQuantity = data.planProductionQuantity;
          if (data.workOrderQuality === "") {
            data.workOrderQuality = "other";
          }
          form.val("productionWorkOrderForm", data);
          // 表单提交事件
          form.on("submit(productionWorkOrderFormSubmit)", function (d) {
            let waitProductionQuantity = d.field.waitProductionQuantity;
            let claimQuantity = d.field.claimQuantity;

            if (claimQuantity === "") {
              layer.msg("认领数量不能为空", { icon: 2 });
              return false;
            }

            if (claimQuantity === "0") {
              layer.msg("认领数量不能为0", { icon: 2 });
              return false;
            }
            if (parseInt(claimQuantity) > parseInt(waitProductionQuantity)) {
              layer.msg("认领数量不能大于待排产数量", { icon: 2 });
              return false;
            }
            d.field.outputQuantity = d.field.claimQuantity;
            d.field.productionPlanRecordId = data.productionPlanRecordId;
            d.field.productionProcessDeviceId = d.field.id;
            layer.load(2);
            admin.req(
              "production/productionPlan/admin/productionWorkOrder/submitWorkOrder",
              JSON.stringify(d.field),
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  layer.msg(res.msg, { icon: 1 });
                  table.reload("makeOrderTable");
                  //清空数据
                  waitProductionQuantity = null;
                  claimQuantity = null;
                  layer.closeAll("page");
                } else {
                  layer.msg(res.msg, { icon: 2 });
                }
              },
              "POST",
              true,
              "application/json; charset=utf-8"
            );
            return false;
          });
        },
      });
    }
  });
</script>
